<template>
  <div class="page_my_love">
    <div class="my_love_title_img"></div>
    <div class="my_love_container">
      <!-- 自己打开自己的爱情主页 -->
      <template v-if="config.pageType  == 0">
        <div class="my_love_head_box">
          <img v-if="myLove.imgList"
               class="my_love_head"
               :src="myLove.imgList[0]">
        </div>
        <p v-if="myLove.boy"
           class="my_love_user_name">
          {{myLove.boy}}
          <span>&</span>
          {{myLove.girl}}
        </p>

        <UserRanking :myLove="myLove"></UserRanking>

        <div class="my_love_red_page_container">
          <div v-if="redPageList.length&&myLove.totNum < (redPageList[redPageList.length - 2].needNum)"
               class="my_love_red_page_countdown flex justify-center align-center">
            <img src="@/assets/img/cash_1.png">
            <div class="countdown_box flex align-center">
              <div class="time">{{countDown.h}}</div>
              <span>:</span>
              <div class="time">{{countDown.m}}</div>
              <span>:</span>
              <div class="time">{{countDown.s}}</div>
            </div>
          </div>

          <div v-else
               class="my_love_red_page_in_last_type flex align-center ">
            <img src="@/assets/img/cash_2.png">
            <span>8月26号公布</span>
          </div>

          <div class="red_page_box">
            <div v-for="(item, index) in redPageList "
                 :key="index"
                 class="red_page_item">
              <p v-if="index<redPageList.length-1"
                 class="red_page_surplus">
                红包剩{{item.surplus}}个
              </p>
              <div v-else
                   class="btn_prize_list">
                <router-link to="/prizeList"
                             tag="span">奖品清单></router-link>
              </div>
              <p v-if="index<redPageList.length-1"
                 class="need_num">
                {{item.needNum}}个祝福
              </p>
              <div v-else
                   class="need_num">
                前{{item.needNum}}名
              </div>
              <div class="red_page_img">
                <img :src="item.img">
                <div v-show="!(index>0&&index<(redPageList.length -2))"
                     :class="index == 0?'select':''"
                     class="round"></div>
              </div>
            </div>

            <div :style="{width: 'calc(25% * ' +(redPageList.length - 1)+' + 40px)'}"
                 class="line">
              <div :style="{width:nextRedPageInfo.nowIdx?25*(nextRedPageInfo.nowIdx)+'%':'20px'}"
                   class="red_line"></div>
            </div>
            <div :style="{width: 'calc(25% * ' +(redPageList.length )}"
                 class="red_page_type flex">
              <div class="flex-1">红包奖励</div>
              <div class="last_red_page_type">冲榜奖励</div>
            </div>

            <p v-show="nextRedPageInfo.show"
               class="next_red_page_tip">
              加把劲，再收获{{nextRedPageInfo.need}}个祝福即可领{{nextRedPageInfo.money}}元红包
            </p>

            <div class="total_red_page_box flex align-center justify-between ">
              <p>累计红包金额 : <span>{{nextRedPageInfo.totMoney}}</span>元</p>
              <div @click="handleWithdrawal"
                   class="btn">提现 ></div>
            </div>

          </div>
        </div>
      </template>

      <!-- 别人打开别人的爱情主页 -->
      <template v-else>
        <div class="other_user_photo_box">
          <div :class="currentBanner === index?'select' :''"
               v-for="(item, index) in myLove.imgList"
               :key="index"
               class="other_user_photo_item">
            <img :src="item">
          </div>
          <ul class="indicator_box flex align-center">
            <li :class="currentBanner === index?'select' :''"
                @click="handleClickIndicator(index)"
                class="indicator"
                v-for="(item, index) in myLove.imgList"
                :key="index"></li>
          </ul>
        </div>
        <div class="other_user_declaration text-line-2 ">
          用户的爱情宣言用户的爱情宣言用户的爱情宣言用户的爱情宣言用户的爱情宣言用户的爱情宣言
        </div>
        <div class="other_user_dashed"></div>
        <div class="other_user_name">
          {{myLove.boy}}
          <span>&</span>
          {{myLove.girl}}
        </div>
        <div class="other_user_id">ID：532156</div>

        <UserRanking :myLove="myLove"></UserRanking>

        <div class="other_user_view_btn_box">
          <div @click="showSearchDialog = true"
               class="other_user_view_btn search"></div>
          <div @click="showMoreVotesDialog = true"
               class="other_user_view_btn like"></div>
        </div>
      </template>

    </div>

    <!-- 自己打开自己的爱情主页 -->
    <div v-if="config.pageType  == 0"
         class="like_list_container">
      <div class="tab_list flex justify-around ">
        <div :class="tabIndex == 1?'select':''"
             @click="tabIndex = 1"
             class="tab  ">
          祝福我的
        </div>
        <div :class="tabIndex == 2?'select':''"
             @click="tabIndex = 2"
             class="tab">
          我祝福过
        </div>
      </div>
      <div v-show="tabIndex == 1"
           class="like_me_list">
        <div v-for="(item,index) in LikeMeList"
             :key="index"
             class="list-item flex justify-between align-center ">
          <img :src="item.img">
          <div class="list-item-right flex-1 flex align-center justify-between">
            <div class="flex-1">
              <p class="phone text-line-1">{{item.phone||item.nickNam}}</p>
              <p class="comment text-line-2">{{item.comment}}</p>
            </div>
            <div @click="handleShowVote(item.id,index)"
                 class="btn">{{ !config.loginType || config.votesNum? '祝福TA':'已祝福'}}</div>
          </div>
        </div>
      </div>
      <div v-show="tabIndex == 2"
           class="my_like_list">
        <p class="no_more">
          暂无数据!
        </p>
      </div>
    </div>

    <div class="bottom_btn_box flex align-center justify-between ">
      <div class="btn_go_home">
        <router-link to="/"
                     tag="span">去首页</router-link>
      </div>
      <div v-if="config.pageType  == 0"
           class="btn_search">
        <router-link to="/shareMyLove"
                     tag="span">分享求祝福</router-link>
      </div>
      <div v-else
           @click="handleClickLike"
           class="btn_search">
        {{config.votesNum? '祝福TA们':'已祝福,请明日再来'}}
        <div :class="likeClass"
             class="like flex align-center "> <img src="@/assets/img/give_like.png"
               alt=""> <span>+1</span></div>
      </div>
    </div>

    <Blessing :blessing="blessing"
              :showBlessingDialog="showBlessingDialog"
              @changeBlessing="changeBlessing"
              @vote="handleVote"
              @close="showBlessingDialog=false"
              @input="handleBlessingInput"></Blessing>

    <MoreVotes @close="showMoreVotesDialog = false"
               :showMoreVotesDialog="showMoreVotesDialog"></MoreVotes>

    <Share :showSearchDialog="showSearchDialog"
           @close="showSearchDialog =false"></Share>

  </div>
</template>

<script>
let bannerTimer = null;
let timer = null;

// import Dialog from "@/components/dialog/dialog"
import MoreVotes from "@/components/moreVotes/moreVotes"
import Blessing from "@/components/blessing/blessing"
import Share from "./modules/share/share"
import UserRanking from "./modules/userRanking/userRanking"

export default {
  components: {
    // Dialog,
    MoreVotes,
    Blessing,
    Share,
    UserRanking
  },
  data() {
    return {
      config: {
        loginType: true,
        pageType: 0,// 0 自己看页面 1 别人看页面
        votesNum: 1, // 剩余票数
        userId: 111111, // 个人用户id

        joinTime: "2021/04/15 17:00:00"
      },
      nextRedPageInfo: {
        show: false,
        need: 0,
        money: 0,
        name: '',
        totMoney: 0,
        nowIdx: 0
      },
      myLove: {},
      redPageList: [],
      tabIndex: 1, // 1 祝福我的 2 我祝福别人的
      LikeMeList: [],
      myLikeList: [],

      showBlessingDialog: false,
      blessing: '',
      blessingList: [],
      blessingDialogConfig: {
        idx: 0
      },

      showMoreVotesDialog: false,

      countDown: {
        show: true,
        h: '00',
        m: '00',
        s: '00'
      },
      showSearchDialog: false,
      currentBanner: 0,
      likeClass: ''
    }
  },
  created() {
    this.getBlessingList()
    this.getMyLoveInfo()
    timer = setInterval(() => {
      this.initCountDown()
    }, 1000);
  },
  beforeDestroy() {
    clearInterval(timer)
    clearInterval(bannerTimer)
  },
  methods: {
    handleClickLike() {
      if (this.config.votesNum > 0) {
        this.likeClass = 'hide'
        setTimeout(() => {
          this.likeClass = 'show'
        }, 100);
      }
      this.handleShowVote(this.config.userId, -1)
    },
    initBanner() {
      clearInterval(bannerTimer)
      bannerTimer = setInterval(() => {
        if (!this.myLove.imgList) {
          return
        }
        let idx = this.currentBanner + 1
        idx = idx > this.myLove.imgList.length - 1 ? 0 : idx
        this.handleChangeBanner(idx)
      }, 3000);
    },
    handleClickIndicator(idx) {
      clearInterval(bannerTimer)
      this.handleChangeBanner(idx)
    },
    handleChangeBanner(idx) {
      this.currentBanner = idx
    },
    handleWithdrawal() {
      this.$toast("提现")
    },
    initCountDown() {
      let countDown = {
        h: '00',
        m: '00',
        s: '00'
      }
      let joinTime = new Date(this.config.joinTime)
      let endTime = new Date(joinTime.setHours(joinTime.getHours() + 72))
      let currentTime = new Date().getTime()
      if (currentTime > endTime) {
        this.countDown = countDown
        clearInterval(timer)
      } else {
        let pre = endTime - currentTime
        let h = Math.floor(pre / 1000 / 60 / 60);
        let m = Math.floor(pre / 1000 / 60 % 60);
        let s = Math.floor(pre / 1000 % 60);
        this.countDown = {
          h: this.fillZero(h),
          m: this.fillZero(m),
          s: this.fillZero(s),
        }
      }

    },
    fillZero(num) {
      num = num.toString()
      return num[1] ? num : '0' + num
    },
    getBlessingList() {
      this.$api.apiHomeBlessing().then(res => {
        console.log('祝福语列表', res);
        this.blessingList = res.data.text
        this.changeBlessing()
      })
    },
    handleBlessingInput(e) {
      this.blessing = e
    },
    changeBlessing() {
      this.blessing = this.blessingList[this.getIntRandom(0, this.blessingList.length - 1)]
    },
    getIntRandom(lowerValue, upperValue) {
      return Math.floor(Math.random() * (upperValue - lowerValue + 1) + lowerValue);
    },
    handleShowVote(id, idx) {
      if (!this.config.loginType) {
        this.$toast('请先登录!')
      } else if (this.config.votesNum <= 0) {
        this.showMoreVotesDialog = true
      } else {
        this.blessingDialogConfig.idx = idx
        this.showBlessingDialog = true
      }
    },
    handleVote() {
      if (!this.blessing) {
        this.$toast('请输入祝福语!')
        return
      }
      this.config.votesNum--
      this.showBlessingDialog = false
    },
    handleMoreVotesDialogClose() {
      this.showMoreVotesDialog = false
    },

    handleShowBlessingDialog(id, index) {
      console.log(id, index);
      this.showBlessingDialog = true
    },
    getMyLoveInfo() {
      this.$api.apiMyLoveInfo().then(res => {
        console.log(11, res);
        this.myLove = res.data.myLove
        this.redPageList = res.data.redPage
        this.LikeMeList = res.data.LikeMeList
        this.myLikeList = res.data.myLikeList
        let totMoney = 0
        if (this.config.pageType == 0) {
          for (let index = 0; index < this.redPageList.length - 1; index++) {
            const element = this.redPageList[index];
            if (this.myLove.totNum < element.needNum) {
              this.nextRedPageInfo = {
                show: true,
                need: element.needNum - this.myLove.totNum,
                name: element.name,
                money: element.money,
                nowIdx: index,
                totMoney
              }
              return
            } else {

              totMoney += element.money
            }
          }
          this.nextRedPageInfo
        } else {
          this.initBanner()
        }
      })
    }
  }
}
</script>

<style lang="scss" >
@import "./css/myLovePage.scss";
</style>